<template>
  <div>
    <TableVue
      ref="tableEl"
      module-name="菜单"
      :dialog-width="500"
      :queryFormData="state.formData"
      :column-config="columnConfig"
      data-list-api="/auth/menu/tree"
      delete-api="/auth/menu"
      update-or-add-api="/auth/menu"
      :show-top-del-btn="false"
      :use-params-delete="true"
      :add-data="state.addItemData"
      :dialog-form-rules="rules"
      row-key="id"
      @before-open-dialog="onBeforeOpenDialog"
      @refactor-data="onRefactorData"
    >
      <!------------------------------------------ 查询 ------------------------------------------------------->

      <template #queryItem>
        <el-form-item label="菜单名称" prop="menuName" class="mgr30">
          <el-input v-model="state.formData.menuName" clearable placeholder="请输入菜单名称" />
        </el-form-item>
      </template>

      <!------------------------------------------ 表格列 ------------------------------------------------------->

      <template #isKeepAlive="{ row }: MenuSlot">
        <el-tag :type="row.meta?.isKeepAlive ? 'primary' : 'warning'">{{ row.meta?.isKeepAlive ? '是' : '否' }}</el-tag>
      </template>

      <template #isHide="{ row }: MenuSlot">
        <el-tag :type="row.meta?.isHide ? 'warning' : 'primary'">{{ row.meta?.isHide ? '否' : '是' }}</el-tag>
      </template>

      <template #menuType="{ row }: MenuSlot">
        <el-tag :type="row.menuType === '1' ? 'primary' : 'success'">{{ row.menuType === '1' ? '菜单' : '按钮' }}</el-tag>
      </template>

      <template #icon="{ row }: MenuSlot">
        <SvgIcon v-if="row.meta?.icon" :name="row.meta?.icon" />
      </template>

      <template #extraBtn1="{ row }: MenuSlot">
        <el-button type="primary" link @click="handleAddByRow(row)">新增</el-button>
      </template>

      <!------------------------------------------ 新增修改 ------------------------------------------------------->

      <template #dialogUpdateOrAdd>
        <FormAddNemu v-model="state.formModelData" v-model:tree-data="state.treeData" />
      </template>
    </TableVue>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import TableVue, { type TableViewInstance } from '@/components/table'
  import FormAddNemu from './cpns/form-add-nemu.vue'
  import { columnConfig } from './config'
  import type { IMenuFormData, IMenuEntity, MenuSlot } from './config'

  const tableEl = ref<TableViewInstance | null>()

  const initAddData = (): IMenuFormData => {
    return {
      name: '',
      permission: '',
      parentId: '-1',
      icon: '',
      path: '',
      visible: '1',
      sortOrder: 0,
      menuType: '1',
      keepAlive: '1'
    }
  }

  const state = reactive({
    formData: {
      menuName: ''
    },
    treeData: [{ id: '-1', name: '根菜单', children: [] }] as any[],

    addItemData: initAddData(),
    formModelData: {} as IMenuFormData
  })

  const rules = {
    menuType: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
    name: [{ required: true, message: '请输入菜单名', trigger: 'blur' }],
    parentId: [{ required: true, message: '请选择上级菜单', trigger: 'blur' }],
    path: [{ required: true, message: '请输菜单路径', trigger: 'blur' }],
    keepAlive: [{ required: true, message: '请选择是否缓存', trigger: 'blur' }],
    visible: [{ required: true, message: '请选择是否可见', trigger: 'blur' }],
    permission: [{ required: true, message: '请输入权限标识 ', trigger: 'blur' }]
  }

  /**----------------------------methods----------------------------------------------------------------------- */

  const handleAddByRow = (row: IMenuEntity) => {
    const data = initAddData()
    data.parentId = row.menuType === '1' ? row.id : row.parentId
    tableEl.value?.handleUpdateOrAdd(data, 'add')
  }

  const onRefactorData = (data: IMenuEntity[]) => {
    state.treeData[0].children = data
  }

  /**
   * 新增或修改
   * @param type
   * @param data
   */
  const onBeforeOpenDialog = (type: 'add' | 'update', data: IMenuFormData) => {
    if (type === 'update') {
      data.keepAlive = data.meta?.isKeepAlive ? '1' : '0'
      data.visible = !data.meta?.isHide ? '1' : '0'
      data.icon = data.meta!?.icon
    } else {
      state.addItemData = initAddData()
    }

    state.formModelData = data
  }

  /**----------------------------lifecycle----------------------------------------------------------------------- */
</script>

<style scoped></style>
